<template>
    <div class="layout-container">
        <div class="top-nav">
            <TopNav />
        </div>
        <div class="main">
            <div class="side-nav">
                <SideNavView />
            </div>
            <div class="content">
                <RouterView />
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref,reactive} from "vue"
import { RouterView } from "vue-router"
import TopNav from "@/components/TopNav/TopNavView.vue"
import SideNavView from "@/components/SideNav/SideNavView.vue";

</script>
<style lang="less" scoped>

.layout-container{
    width: 100%;
    min-width: 1400px;
    .top-nav{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 999;
    }
    .main{
        display: flex;
        .side-nav{
            width: 153px;
            position: fixed;
            left: 0;
            top: 60px;
            bottom: 0;
            z-index: 10;
        }
        .content{
            width: 100%;
            padding-left: 180px;
            padding-top: 70px;
            padding-right: 10px;
            background: #fff;
        }
    }
}

</style>
